<template>
    <div>
        <div class="content">
            <list class="list-cont">
                <cell class="box1" >
                    <div>
                        <text class="tit-box">生涯问卷</text>
                    </div>
                    <scroller class="list-nr" scroll-direction="horizontal"  style="flex-direction: row;flex-wrap: nowrap">
                        <div class="cell" v-for="item in lastedUpdateList" @click="jump('/dati/'+item.id)">
                            <image style="width: 198px;height: 254px;position: absolute;top: 0;left: 0;"
                                   :src="item.img"></image>
                            <text class="cell-title">{{item.tag}}</text>
                            <text class="time">{{item.time}}</text>
                            <text class="p">{{item.desc}}</text>
                            <text :class="[item.isOver?'btn-blue':'btn-gray']">{{item.isOver?"未完成":"已完成"}}</text>
                        </div>
                    </scroller>
                </cell>
                <cell class="box" v-for="data in dataList">
                    <div class="tit-box-cont">
                        <text class="tit-box">{{data.tag}}</text>
                        <text class="sm-tiitle">({{data.desc}})</text>
                    </div>
                    <div class="line"></div>
                    <div class="list">
                        <div class="list-sy" v-for="item in data.list">
                            <div class="sy-cell" @click="jump('/dati/'+item.id)">
                                <text class="sy-cell-title">{{item.name}}</text>
                                <text class="sy-text">{{item.desc}}</text>
                                <text class="sy-num">{{item.num}}人做过</text>
                            </div>
                        </div>
                    </div>
                </cell>
            </list>
        </div>
        <AppHeader :title="headerTitle" :showPhoto="true"></AppHeader>
    </div>
</template>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    import mixins from '../../mixins'

    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data(){
            return {
                headerTitle:"问卷调查",
                lastedUpdateList:[{
        "tag":"高一",
        "img":"http://121.42.150.64:8099/resource/img/cz.jpg",
        "time":"2016-01-01",
        "title":"调研一",
        "isOver":true,
        "desc":"2016-2017学年高中职业生涯发展教育系列调研1:高中职业生…"
      },{
        "tag":"高二",
        "time":"2016-01-01",
        "img":"http://121.42.150.64:8099/resource/img/sy.jpg",
        "title":"调研二",
        "isOver":false,
        "desc":"2016-2017学年高中职业生涯发展教育系列调研1:高中职业生…"
      },{
        "tag":"高三",
        "img":"http://121.42.150.64:8099/resource/img/pbg.jpg",
        "time":"2016-01-01",
        "title":"调研三",
        "isOver":false,
        "desc":"2016-2017学年高中职业生涯发展教育系列调研1:高中职业生…"
      }],
                dataList:[]
            }
        },
        created(){
            let self=this;
            self.getPageData();
        },
        methods: {
            clickAppNavItem:function(item){
                this.jump(item.link);
            },
            getPageData:function(){
                let self=this;
                self.request({
                    type:"post",
                    url:"/findQuestionnaireList",
                    data:{
                        "access_token":self.accessToken
                    }
                }).then(res=>{
                    console.log(res);
                if(res.status==1){
                    //self.lastedUpdateList=res.data.lastUpdate;
                    self.dataList = res.data.dataList;
                }
            });
            }
        }
    }


</script>

<style scoped>
    .content{
        margin-top: 90px;
        height: 1244px;
        width: 750px;
        margin-bottom: 100px;
    }
    .list-cont{
        background-color: #f2f2f2;
    }
    .box1{
        background-color: #fff;
        padding-left:20px ;
        padding-right:20px ;
        padding-bottom: 20px;
        height: 420px;
        border-bottom-style: solid;
        border-bottom-width:10px ;
        border-bottom-color: #f2f2f2;

    }
    .box{
        background-color: #fff;
        padding-left:20px ;
        padding-right:20px ;
        padding-bottom: 80px;
        height: 300px;
        border-bottom-style: solid;
        border-bottom-width:10px ;
        border-bottom-color: #f2f2f2;
    }
    .tit-box{
        margin-top: 20px;
        font-size: 30px;
    }
    .cell{
        width: 196px;
        height: 310px;
        margin-left: 10px;
        margin-right: 32px;
        position: relative;
    }

    .cell-title{
        position: absolute;
        right: 16px;
        top: 16px;
        font-size: 20px;
        color: #fff;
    }
    .tit-box-cont{
        flex-direction: row;
        border-bottom-color: #f0f0f0;
        border-bottom-style:solid;
        border-bottom-width:1px;
        height: 70px;
    }
    .time{
        font-size: 20px;
        color: #b0b0b0;
        top: 50px;
        left:20px;
        position: absolute;
    }
    .btn-gray{
        width: 92px;
        height: 42px;
        background-color: #b0b0b0;
        border-radius: 6px;
        text-align: center;
        padding-top: 8px;
        font-size: 22px;
        color: #ffffff;
        left:50px;
        bottom:0;
        position: absolute;
    }
    .btn-blue{
        width: 92px;
        height: 42px;
        background-color: #42b7ff;
        border-radius: 6px;
        text-align: center;
        padding-top: 8px;
        font-size: 22px;
        color: #ffffff;
        left:50px;
        position: absolute;
        bottom:0
    }
    .p{
        width: 154px;
        height: 150px;
        line-height: 36px;
        font-size: 20px;
        color: #4c4b4b;
        top: 82px ;
        left: 20px;
        right: 20px;
        position: absolute;
    }
    .list{
        flex-direction: row;
    }
    .list-nr{
        flex-direction: row;
        margin-top: 20px;
    }
    .sm-tiitle{
        font-size: 24px;
        color: #b0b0b0;
        margin-top: 24px;
        margin-left: 10px;
    }
    .line{
        border-bottom: 1px solid #f0f0f0;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .list-sy{
        width: 176px;
        flex: 1;
    }
    .sy-cell{
        flex: 1;
        border-right-color:#e5e5e5;
        border-right-style:dashed ;
        border-right-width:1px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .sy-cell-title{
        text-align: center;
        font-size: 28px;
        color: #000;
    }
    .sy-text{
        color: #53b3e6;
        text-align: center;
        font-size: 20px;
        height: 60px;
        margin-top: 8px;
        line-height: 26px;
    }
    .sy-num{
        color: #b0b0b0;
        font-size: 20px;
        margin-top: 20px;
        text-align: center;
    }





</style>